import Image from "next/image";
import MaxWidthWrapper from "./components/MaxWidthWrapper";
import Phone from "./components/Phone";
import {Reviews} from "./components/Reviews";
import { Check, Star, ArrowRight } from "lucide-react";
import {Icons} from "@/components/Icons";
import Link from "next/link"
import { buttonVariants } from "@/components/ui/button";
 
export default function Home() {
  return (
    <div className="bg-slate-50 ">
      <section>
        <MaxWidthWrapper className='pb-24 pt-10 lg:grid lg:grid-cols-3 sm:pb-32 lg:gap-x-0 xl:gap-x-8 lg:pt-24 xl:pt-32 lg:pb-52'>
          <div className="col-span-2 px-6 lg:px-0 lg:pt-4 lg:ml-20">
            <div className="relative mx-auto text-center lg:text-left flex flex-col items-center lg:items-start">
              <div className="absolute w-28 left-0 -top-20 hidden lg:block">
                <img src="/snake-1.png" alt=""  className="w-full"/>
              </div>
              <h1 className="relative w-fit tracking-tight text-balance mt-16 font-bold !leading-tight text-gray-900 text-5xl md:text-6xl lg:text-7xl"> 
                您照片在<span className="bg-green-600 px-2 text-white">手机上的案例</span>
              </h1>
              <p className="mt-8 text-lg lg:pr-10 max-w-prose text-center lg:text-left text-balance md:text-wrap">
                Capture your favorite moments with our mobile app. phone case.
                CaseCobra allows you to take photos and videos with your phone and
                store them on your phone case.  
              </p>

              <ul className="mt-8 space-y-2 text-left font-medium flex flex-col items-center sm:items-start">
                <div className="space-y-2">
                   <li className="flex gap-1.5 items-center text-left">
                      <Check className="w-5 h-5 shrink-0 text-green-600"/> Hight-quality, durable material
                   </li>
                   <li className="flex gap-1.5 items-center text-left">
                   <Check className="w-5 h-5 shrink-0 text-green-600"/>Easy to use and customize
                   </li>
                   <li className="flex gap-1.5 items-center text-left">
                   <Check className="w-5 h-5 shrink-0 text-green-600"/>modern IPhone models supported
                   </li>
                </div>
              </ul>

              <div className="flex -space-x-4 mt-8">
                  <img className="inline-block h-10 w-10 rounded-full ring-2 ring-slate-100" src="/users/user-1.png" alt="" />
                  <img className="inline-block h-10 w-10 rounded-full ring-2 ring-slate-100" src="/users/user-2.png" alt="" />
                  <img className="inline-block h-10 w-10 rounded-full ring-2 ring-slate-100" src="/users/user-3.png" alt="" />
                  <img className="inline-block h-10 w-10 rounded-full ring-2 ring-slate-100" src="/users/user-4.jpg" alt="" />
                  <img className="inline-block h-10 w-10 rounded-full ring-2 ring-slate-100 object-cover" src="/users/user-5.jpg" alt="" />
              </div>

              <div className="flex flex-col justify-between items-center sm:items-start mt-10">
                <div className="flex gap-0.5">
                  <Star className="h-4 w-4 text-green-600 fill-green-600"/>
                  <Star className="h-4 w-4 text-green-600 fill-green-600"/>
                  <Star className="h-4 w-4 text-green-600 fill-green-600"/>
                  <Star className="h-4 w-4 text-green-600 fill-green-600"/>
                  <Star className="h-4 w-4 text-green-600 fill-green-600"/>
                </div>
                <p><span className="font-semibold">1.2222</span>正在制作中....</p>
              </div>
            </div>
          </div>

          <div className="col-span-full lg:col-span-1 w-full flex justify-center px-8 sm:px-16 md:px-0 mt-32 lg:mx-0 lg:mt-20 h-fit">
            <div className="relative md:max-w-xl">
              <img src="/your-image.png" className="absolute w-40 lg:w-52 left-56 -top-20 select-none hidden sm:block lg:hidden xl:block" alt="" />
              <img src="/line.png" className="absolute w-20 -left-6 -bottom-6 select-none" alt="" />
              <Phone className="w-64" imgSrc='/testimonials/1.jpg'/>
            </div>
          </div>
        </MaxWidthWrapper>
      </section>

      {/* 评论区 */}
      <section className="bg-slate-100 py-24">
        <MaxWidthWrapper className='flex flex-col items-center gap-16 sm:gap-32'>
          <div className="flex flex-col lg:flex-row items-center gap-4 sm:gap-6">
            <h2 className="order-1 mt-2 tracking-tighter text-balance !leading-tight font-bold text-5xl md:text-6xl text-gray-900">
              What our <span className="relative px-2"> customers 
              <Icons.underLine className="hidden sm:block pointer-events-none absolute inset-x-0 -bottom-6 text-green-500" />  
              </span> say
            </h2>
            <img src="/snake-2.png" alt="" className="w-24 order-0 lg:order-2" />
          </div>

          <div className="mx-auto grid max-w-2xl grid-cols-1 px-4 lg:mx-0 lg:max-w-none lg:grid-cols-2 gap-y-16">
            <div className="flex flex-auto flex-col gap-4 lg:pr-8 xl:pr-20">
              <div className="flex gap-0.5 mb-2">
                <Star className="h-5 w-5 text-green-600 fill-green-600" />
                <Star className="h-5 w-5 text-green-600 fill-green-600" />
                <Star className="h-5 w-5 text-green-600 fill-green-600" />
                <Star className="h-5 w-5 text-green-600 fill-green-600" />
                <Star className="h-5 w-5 text-green-600 fill-green-600" />
              </div>
              <div className="text-lg leading-8">
                <p>
                  the case cobra is a tool for managing your case files. Had you ever wanted to manage your case files but didn&apos;t know how?
                  <span className="p-0.5 bg-slate-800 text-white"> the image is super clear</span>, on the case cobra you can upload your case files and manage them.
                </p>
              </div>
              <div className="flex gap-4 mt-2">
                <img className="rounded-full h-12 w-12 object-cover" src="/users/user-1.png" alt="user" />
                <div className="flex gap-1.5 items-center text-zinc-600">
                  <Check  className="w-4 h-4 stroke-[3px] text-green-600"/>
                  <p className="text-sm "> 非常棒 </p>
                </div>
              </div>
            </div>

            <div className="flex flex-auto flex-col gap-4 lg:pr-8 xl:pr-20">
              <div className="flex gap-0.5 mb-2">
                <Star className="h-5 w-5 text-green-600 fill-green-600" />
                <Star className="h-5 w-5 text-green-600 fill-green-600" />
                <Star className="h-5 w-5 text-green-600 fill-green-600" />
                <Star className="h-5 w-5 text-green-600 fill-green-600" />
                <Star className="h-5 w-5 text-green-600 fill-green-600" />
              </div>
              <div className="text-lg leading-8">
                <p>
                  the case cobra is a tool for managing your case files. Had you ever wanted to manage your case files but didn&apos;t know how?
                  <span className="p-0.5 bg-slate-800 text-white"> the image is super clear</span>, on the case cobra you can upload your case files and manage them.
                </p>
              </div>
              <div className="flex gap-4 mt-2">
                <img className="rounded-full h-12 w-12 object-cover" src="/users/user-1.png" alt="user" />
                <div className="flex gap-1.5 items-center text-zinc-600">
                  <Check  className="w-4 h-4 stroke-[3px] text-green-600"/>
                  <p className="text-sm "> 非常棒 </p>
                </div>
              </div>
            </div>
          </div>
        </MaxWidthWrapper>

        <div className="pt-16">
          <Reviews />
        </div>
      </section>

      <section>
        <MaxWidthWrapper className="py-24">
          <div className="mb-12 px-6 lg:px-8">
            <div className="mx-auto max-w-2xl sm:text-center">
              <h2 className="order-1 mt-2 tracking-tighter text-balance !leading-tight font-bold text-5xl md:text-6xl text-gray-900">
                please Upload <span className=" px-2 bg-green-600 text-white"> your photos 
                </span> now
              </h2>
            </div>
          </div>

          <div className="mx-auto max-w-6xl px-6 lg:px-8">
            <div className="relative flex flex-col items-center md:grid grid-cols-2 gap-40">
              <img src="/arrow.png"
                className="absolute top-[25rem] md:top-1/2 -translate-y-1/2 z-10 left-1/2 rotate-90 md:rotate-0"
                alt="" />

                <div className="relative h-80 md:h-full w-full md:justify-self-end max-w-sm rounded-xl bg-gray-900/5 ring-inset ring-gray-900/10 lg:rounded-2xl">
                  <img src="/horse.jpg"
                    className="rounded-md object-cover bg-white shadow-2xl ring-1 ring-gray-900/10 h-full w-full"
                    alt="" />
                </div>

                <Phone imgSrc="/horse_phone.jpg" className="w-60 ml-20" />
            </div>
          </div>

          <ul className="mx-auto mt-12 max-wprose sm:text-lg space-y-2 w-fit">
            <li className="w-fit">
              <Check className="h-5 w-5 text-green-600 inline mr-1.5" />
              Hight-quality silicone material
            </li>
            <li className="w-fit">
              <Check className="h-5 w-5 text-green-600 inline mr-1.5" />
              .........
            </li>
            <li className="w-fit">
              <Check className="h-5 w-5 text-green-600 inline mr-1.5" />
              ---------
            </li>
          </ul>

          <div className="flex justify-center">
            <Link href={'/configure/upload'} className={buttonVariants({
              size: 'lg',
              className: 'mx-auto mt-8'
            })}>
              Create your case  <ArrowRight className="ml-1.5 h-5 w-5" />
            </Link>
          </div>
        </MaxWidthWrapper>
      </section>


    </div>
  );
}
